<template>
  <template v-for="(action, index) in cActions">
    <TableActionButton :action="action" :data="data"/>
    <!--当配置有分割线且不是最后一项的时候，显示分割线-->
    <a-divider style="margin: 0" v-if="action.divider && index+1!=cActions?.length" type="vertical" />
  </template>
  <a-dropdown v-if="cDropdownActions && cDropdownActions.length">
    <a class="ant-dropdown-link" @click.prevent>
      更多
      <DownOutlined />
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item v-for="action in cDropdownActions">
          <TableActionButton :action="action" :data="data"/>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>
<script setup lang="ts">
import { computed, PropType } from 'vue';
import { ActionItem } from './types';
import { useUserStore } from '/@/store/modules/user';
import { DownOutlined } from '@ant-design/icons-vue';
import TableActionButton from './TableActionButton.vue';
const userStore = useUserStore()
const props = defineProps({
  actions: {
    type: Object as PropType<ActionItem[]>
  },
  dropdownActions: {
    type: Object as PropType<ActionItem[]>
  },
  data: { // 当前行数据
    type: Object
  }
})
const _ifShow = (action: ActionItem, row: any): boolean =>{
  if(action.ifShow === true || action.ifShow === undefined) {
    return true
  }
  if(action.ifShow && typeof action.ifShow == 'function') {
    return action.ifShow(action, row)
  }
  return false
}
// 普通操作项
const cActions = computed<ActionItem[]>(()=>{
  return (props.actions?.filter(item=>{
    // 判断是否有权限
    return _ifShow(item, props.data) && userStore.hasPerm(item.perms || '')
  }) || []).sort((a,b)=>{
    return (a.orderNo || 99)-(b.orderNo || 99)
  })
})
// 下拉的操作项
const cDropdownActions = computed<ActionItem[]>(()=>{
  return (props.dropdownActions?.filter(item=>{
    // 判断是否有权限
    return _ifShow(item, props.data) && userStore.hasPerm(item.perms || '')
  }) || []).sort((a,b)=>{
    return (a.orderNo || 99)-(b.orderNo || 99)
  })
})
</script>
<style lang="less" scoped>

</style>